/**
 * 打印赔偿单
 */

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useRef, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Button } from 'antd';
import styles from './index.less';
import router from 'umi/router';
import printJS from 'print-js';

import {
downloadOrderInfo
} from './service.js';

class PrivateData {
  static buttonArr = [
    { text: '打印', value: '1' },
  ];
}

const PrintPeiChang = props => {

  const { location: { state } } = props;

  const [imgUrl, setImgUrl] = useState('');

  // 获取打印数据
  const { run: runDownloadOrderInfo } = useRequest(params => downloadOrderInfo(params), {
    manual: true,
    onSuccess (res) {
      // console.log(res, '获取打印数据');
      setImgUrl(res || '');
    }
  });

  useEffect(() => {
  let orderId = state.orderId || '';
  runDownloadOrderInfo({
    orderId,
    imgWidthPx: 0,
    imgHeightPx: 0
  });
  }, [state]);

  // 打印
  const printIt = useCallback(obj => {
    printJS(obj);
  }, []);

  const buttonArrClick = useCallback(val => {
    if (val === '1') {
      printIt({
        printable: 'printPageImgBox',
        type: 'html',
        maxWidth: '1920',
        scanStyles: false,
        style: '#printPageImgBox{width: 100%; height: auto; overflow: hidden;}.imgPrint{width: 100%; height: auto; display: inline-block;}',
        // targetStyles: ['*'],
        onPrintDialogClose: (val) => {
          console.log(val, 'onPrintDialogClose')
        }
      });
    }
  }, []);

  return (
    <div className={styles.printPageContent}>
      <div className={styles.topTitle}>
        <div className={styles.topTitleLeft}>打印赔偿单</div>
        <div className={styles.topTitleRight}>
          {PrivateData.buttonArr.map((item, index)=> (
            <Button
              type="primary"
              key={index}
              onClick={() => buttonArrClick(item.value)}
              size="small">
              {item.text}
            </Button>
          ))}
        </div>
      </div>
      <div id="printPageImgBox" className={styles.imgContent}>
        {imgUrl && <img className="imgPrint" src={`data:image/jpeg;base64,${imgUrl}`} />}
      </div>
    </div>
  )
};

export default PrintPeiChang;
